<!DOCTYPE html>
<html lang="en">
<!----------------------------------
作者:laoWang--2020-6-24
@www.cqows.cn
----------------------------------->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--css引入代码-->
    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.css">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./elementui/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <![endif]-->
    <title>纯电动模式</title>
</head>

<body>

<div id="app" style="height: 92%;">

<!--标题栏/导航栏/返回链接-->
        <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" id="nav_header" style="height: 64px;">

            <!--详情页返回-->
            <span style="float: left">
            <a href="car_index.html">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="el-icon-back"style="font-size: 35px;color: #1e77ba">返回</div>
</a>
</span>
            <div style="width: 50px"></div>
            <div class="ui container" style="background: #1B1C1D;float: left">
                <span>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <img src="./img/LOGO.png" style="width: 70px;height: 45px;display: inline-block" alt="">
                    &nbsp;&nbsp;&nbsp;<font class="ui teal header item" style="font-size: 30px">纯电动模式</font>
                </span>

            </div>
            <span style="float: right;font-size: 15px; margin-top: 10px;color:#BDBDBD;">重庆奥维斯技术支持</span>
        </nav>

    <div class="container car_detail_a">
        <div class="row">
            <header class="col-md-4">

                <!--左面板总成-->
                <ul style="margin-left: 50px">
                <!-- 变频器运行参数-->
                <li style="background: black;width: 400px;height: 35px;margin-top: 10px;font-size: 15px;color: #3b5998;background: #D8F781;border-radius: 10px;opacity: 0.7;text-align: left">
                    <div style="height: 10px;"></div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div style="width: 15px;height: 15px;background: #00B5AD;display: inline-block;text-align: center">
                </div>    &nbsp;&nbsp;变频器运行参数
                </li> <br>

                <!--当前输出频率-->
                <li style="width: 400px;height: 168px;margin-top: 10px;font-size: 15px;border-radius:10px;color: #3b5998;opacity: 0.7;background: #9FF781;">
                    <div style="width: 10px;height: 10px;margin-bottom: 10px"></div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="img/pinlv.png" alt="">
                    <font style="color:#1B1C1D;">
                        当前输出频率
                    </font>
                    <div style="width: 320px;height: 120px;margin-left: 10px;font-size: 45px;text-align: center">
                        <div style="height: 25px"></div>
                        <sapn>{{carData.hz}}</sapn>HZ
                    </div>
                </li><br>

                <!--当前输出电流-->
                <li style="width: 400px;height: 168px;margin-top: 10px;font-size: 15px;border-radius:10px;color: #3b5998;opacity: 0.7;background: #58FA58;">
                    <div style="width: 10px;height: 10px;margin-bottom: 10px"></div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="img/dianliu.png" alt="">
                    <font style="color:#1B1C1D;">
                        当前输出电流
                    </font>
                    <div style="width: 320px;height: 120px;margin-left: 10px;font-size: 45px;text-align: center">
                        <div style="height: 25px"></div>
                        <span>{{carData.a}}</span>A
                    </div>
                </li><br>

                <!--当前输出电压-->
                <li style="width: 400px;height: 168px;margin-top: 10px;font-size: 15px;border-radius:10px;color: #3b5998;opacity: 0.7;background:#2EFEC8;">
                    <div style="width: 10px;height: 10px;margin-bottom: 10px"></div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="img/dianya.ico" alt="">
                    <font style="color:#1B1C1D;">
                        当前输出电压
                    </font>
                    <div style="width: 320px;height: 120px;margin-left: 10px;font-size: 45px;text-align: center">
                        <div style="height: 25px"></div>
                        <span>{{carData.v}}</span>V
                    </div>
                </li>
                <br>
            </ul>
            </header>

            <article class="col-md-8">
                <li class="news clearfix">
                    <br>
                    <ul>

                        <!--转速表-->
                        <li id="main1" style="width: 1000px;height: 500px"></li>

                        <!--正转/反转-->

                        <li style="height: 35px;" class="ui buttons">
                            <button v-if="carData.direction==2" @click="revers()" style="margin-left: 450px;width: 120px;height: 38px" class="ui inverted button"><font style="vertical-align: inherit;font-size: 15px"><font style="vertical-align: inherit;">切为反转</font></font></button>

                            <button v-if="carData.direction==3" @click="revers()" style="margin-left: 450px;width: 120px;height: 38px" class="ui inverted black button"><font style="vertical-align: inherit;font-size: 15px"><font style="vertical-align: inherit;">切为正转</font></font></button>
                        </li>
                    </ul>
                    <ul>
                        <li style="width: 1200px;height: 40px"></li>

                    </ul>
                        <ul>
                        <li style="width: 280px;height: 40px"></li>

                        <!--启动/停止/加速/减速-->

                        <li style="width: 120px;height: 40px"><button @click="up()" class="ui inverted green button" style="font-size: 15px">启动</button></li>
                        <li style="width: 120px;height: 40px"><button @click="stop()" class="ui inverted red button" style="font-size: 15px">停止</button></li>
                        <li style="width: 120px;height: 40px"><button @click="quicken()" class="ui inverted violet button" style="font-size: 15px">加速</button></li>
                        <li style="width: 120px;height: 40px"><button @click="slow()" class="ui inverted yellow button" style="font-size: 15px">减速</button></li>
                    </ul>
                </li>
            </article>
        </div>
      </div>

</div>
</body>
<!--js引入代码-->
<script src="js/vue.js"></script>
<script src="elementui/index.js"></script>
<script src="jquery/dist/jquery.js"></script>
<script src="Semantic-UI-CSS-master/semantic.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/echarts.js"></script>
<script>
    new Vue({
        el:'#app',
        data: {
            carData:{
                hz:'',
                a:'',
                v:'',
                speed:'',
                direction:'0'
            },

        },

        /******参数初始化*****/
        mounted() {

            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('main1'));

            // 指定图表的配置项和数据
            var option1 = {
                title: {
                    text: '', //标题文本内容
                },
                toolbox: { //可视化的工具箱
                    show: true,
                    feature: {
                        restore: { //重置
                            show: true
                        }
                    }
                },
                tooltip: { //弹窗组件
                    formatter: "{a} <br/>{b} : {c}"
                },
                series: [{
                    name: '业务指标',
                    type: 'gauge',
                    radius: '100%',
                    startAngle: 220, //开始角度
                    endAngle: -40, //结束角度
                    detail: {formatter:'{value}'},
                    data: [{value: 0, name: '转速'}],
                    min:0,              //最小起始值
                    max:1500,            //最大起始值
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 40,
                            color: [
                                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [    //渐变颜色比例及颜色
                                    {
                                        offset: 0.1,
                                        color: "#30D27C"
                                    },
                                    {
                                        offset: 0.8,
                                        color: "#0B95FF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#BEF781"
                                    }
                                ])
                                ]
                            ]
                        }
                    },
                    itemStyle: {			// 仪表盘指针样式。
                        color: "auto",			// 指针颜色，默认(auto)取数值所在的区间的颜色
                        opacity: 10,				// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        borderWidth: 0,			// 描边线宽,默认 0。为 0 时无描边。
                        borderType: "solid",	// 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                        borderColor: "#D0F5A9",	// 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                        shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                        shadowColor: "#EFF8FB",	// 阴影颜色。支持的格式同color。
                    },
                    splitLine: { //分割线样式（及10、20等长线样式）
                        length: 50,
                        lineStyle: { // 属性lineStyle控制线条样式
                            width: 2
                        }
                    },
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);

            setInterval(()=> {//把option.series[0].data[0].value的值使用random()方法获取一个随机数
                axios.get("/common").then((res) => {
                    option1.series[0].data[0].value = (res.data.speed * 1.00).toFixed(2) - 0;
                    this.carData= res.data;
                    myChart1.setOption(option1);
                });
            },500);//间隔时间发送请求

        },
        methods:{
            /******加速******/
            quicken(){
                axios.post("/common/quicken").then((res)=>{
                })
            },
            /******减速******/
            slow(){
                axios.post("/common/slow").then((res)=>{
                })
            },
            /******启动******/
            up(){
                this.direction = '1';
                axios.post("/common/up").then((res)=>{
                })
            },

            /******停止******/
            stop(){
                axios.post("/common/stop").then((res)=>{
                })
            },
            /******反转******/
            revers(){
                axios.post("/common/revers").then((res)=>{
                })
            },

        }
    });
</script>
</html>